<template>
  <FormItemWrapper :component="component">
    <Button v-for="(button, index) in component.compConfigData.widgetConfig.buttons" :key="index"
            :class="button.customClass"
            :type="button.type"
            :ghost="button.ghost"
            :size="button.size"
            :shape="buttonShape(button.shape)"
            :long="button.long"
            :disabled="button.disabled"
            :loading="button.loading"
            :icon="button.icon"
            :custom-icon="button.customIcon"
            @click="runButtonEventCode('onClick', button.onClick.code)"
    >
      {{button.label}}
    </Button>
  </FormItemWrapper>
</template>

<script>
import FormLayoutCommonUtil from "@/utils/FormLayoutCommonUtil";
import FormWidgetMixin from "@/mixin/FormWidgetMixin";

import axios from 'axios'

export default {
  name: "FormItemButtonsWidget",
  mixins: [FormWidgetMixin],
  attr: {
    version: '1.0',
    configDataTemp: Object.assign({

      fieldConfig: FormLayoutCommonUtil.buildWidgetFieldConfig(),
      formItemConfig: FormLayoutCommonUtil.buildFormItemConfig({}, ''),
      widgetConfig: {
        buttons: [
          FormLayoutCommonUtil.buildButtonConfig({type: 'primary', onClick: {code: "this.pnForm.validate((valid) => {\n" +
                  "  if (valid) {\n" +
                  "    axios.post(\"http://\", this.formData).then(result => {\n" +
                  "      console.log(result);\n" +
                  "    });\n" +
                  "  } else {\n" +
                  "    this.$Message.error('表单验证失败');\n" +
                  "  }\n" +
                  "});"}}, '提交表单'),
          FormLayoutCommonUtil.buildButtonConfig({onClick: {code: 'this.pnForm.resetFields()'}}, '清空'),
        ]
      },
      widgetEventCodeConfig: FormLayoutCommonUtil.buildWidgetEventCodeConfig({

      })

    })
  },
  data() {
    return {}
  },
  destroyed() {
    window.axios = null
  },
  mounted() {
    window.axios = axios

    this.init()
  },
  methods: {
    init() {
      this.runWidgetOnMountedEventCode()
    },

    runButtonEventCode(eventName, code) {
      if(this.$store.state.release.pageMetadata) {
        if (code) {
          try {
            eval(code);
          }catch (e) {
            this.$Message.error({
              content: '组件交互事件【'+eventName+'】回调脚本运行异常，异常信息：' + e.message,
              duration: 5
            })
          }
        }
      }
    },

    buttonShape(shape) {
      if (shape == 'default') {
        return null
      }
      return shape
    }
  },
  computed: {},
  watch: {}
}
</script>

<style scoped>

</style>
